<template>
  <div class="product-container edit-product-modal" v-loading.fullscreen.lock="loadingPage">
    <form @submit.prevent="submit" class="base-form" v-if="init && dynamicFields.length">
      <product-edit-form :fields="productFields" v-model="form" customer-is-readonly ref="productEditForm">

      </product-edit-form>
    </form>
  </div>
</template>

<script>
/* api */
import {
  getProductFields,
  createProduct
} from '@src/api/ProductApi'
/* component */
import ProductEditForm from './components/ProductEditForm.vue'
/* enum */
import TenantDataLimitSourceEnum from '@model/enum/TenantDataLimitSourceEnum'
import TenantDataLimitTypeEnum from '@model/enum/TenantDataLimitTypeEnum'
/* mixin */
import VersionMixin from '@src/mixins/versionMixin/index.ts'
import ThemeMixin from '@src/mixins/themeMixin/index.ts'
/* util */
import * as FormUtil from '@src/component/form/util'
import * as util from '@src/modules/product/utils/ProductMapping'
import { isFunction } from '@src/util/type'
import { useFormTimezone } from 'pub-bbx-utils'
import { hasBSCEnterpriseEdition } from '@src/util/version'

const { disposeFormSubmitTime } = useFormTimezone()


export default {
  name: 'product-edit',
  inject: ['initData'],
  mixins: [VersionMixin, ThemeMixin],
  data() {
    return {
      loadingPage: false,
      pending: false,
      init: false,
      submitting: false,
      form: {},
      dynamicFields: []
    }
  },
  computed: {
    productFields() {
      const fields = [
        {
          displayName: '从模板中选择',
          fieldName: 'template',
          formType: 'select',
          isSystem: 1,
          showOnBottom:true
        },
        ...this.dynamicFields
      ]
      if(hasBSCEnterpriseEdition() && this.initData?.isContractCreate) {
        return fields.filter(item=> item.fieldName != 'template')
      }
      return fields
    },
  },
  async mounted() {
    // 获取产品动态字段
    try {
      this.loadingPage = true;
      let res = await getProductFields({isFromSetting:false});
      this.dynamicFields = res.data || [];
      // 产品编号限制字数最大长度为100
      this.dynamicFields.forEach(field => {
        if (field.fieldName == 'serialNumber') {
          field.maxlength = 100
        }
      })
    } catch (error) {
      console.error('product-edit-modal fetch product fields error', error);
    } finally {
      this.loadingPage = false;
    }

    window.submit = this.submit;

    // 检查版本数量限制
    this.checkNumExceedLimitBeforeHandler
    && this.checkNumExceedLimitBeforeHandler(
      TenantDataLimitSourceEnum.Product,
      TenantDataLimitTypeEnum.Product
    )

    try {
      // 初始化默认值
      this.initFormData();
      this.init = true;
    } catch (e) {
      console.error('CustomerEditView caught an error ', e);
    }
  },

  methods: {
    initFormData() {
      let form = {};
      form = util.packToForm(this.productFields, form);

      // 客户详情新建产品，会带的客户信息
      /**
       * 初始化所有字段的初始值
       * @param {*} fields 字段
       * @param {*} origin 原始值
       * @param {*} target 待合并的值
      */
      this.form = FormUtil.initialize(this.productFields, form);
    },
    submit(customer, callBack) {
      this.submitting = true;

      this.$refs.productEditForm.validate()
        .then(valid => {
          this.submitting = false

          if (!valid) return Promise.reject('validate fail.')
           // 处理产品type取值
          if(this.form.catalogId && this.form.catalogId.length > 0) {
            this.form.type = this.form.catalogId[0].type
          }

          let params = disposeFormSubmitTime(this.productFields, util.packToProduct(this.productFields, this.form))
          params = this.globalFormSubmissionDataProcessingHandler(this.productFields, params)

          this.toggleLoading()

          params.customerId = customer.id;
          let linkmanId = customer?.linkman?.id
          let addressId = customer?.address?.id

          this.checkNumExceedLimitAfterHandler(createProduct({
            ...params,
            // 工单新建完产品之后有更新产品的逻辑，不太明确具体场景，这俩字段先不放在params里，避免传回去有影响~
            linkman: linkmanId ? {id: linkmanId} : void 0,
            address: addressId ? {id: addressId} : void 0
          }))
            .then(res => {

              if (!res.succ) {
                return (
                  this.$platform.notification({
                    title: '新建产品失败',
                    message: res.message || '',
                    type: 'error',
                  })
                )
              }

              isFunction(callBack) && callBack({
                productId: res.data,
                productName: params.name,
                serialNumber: params.serialNumber,
                type: params.type,
                ...params
              })

            })
            .catch(err => {
              console.error(err);
            })
            .finally(() => {
              this.toggleLoading(false)
            })

        })
        .catch(err => {
          console.error(err);
          this.toggleLoading(false)
        })
    },
    goBack() {
      parent.frameHistoryBack(window);
    },
    toggleLoading(loading = true) {
      this.pending = loading
      this.loadingPage = loading
    }
  },
  components: {
    [ProductEditForm.name]: ProductEditForm,
  }
}
</script>

<style lang="scss">
  body {
    .base-modal-mask{
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .base-modal {
      margin: 0;
    }
  }

  .product-container {
    height: 100%;
    width: 100%;
    overflow: auto;
    background-color: #fff;
    border-radius: 4px;
    min-height: 435px;

    .page-title {
      border-bottom: 1px solid #f4f7f5;
      padding: 12px 10px;
      display: flex;
      justify-content: space-between;

      .iconfont {
        font-size: 12px;
      }

      .title {
        display: flex;
        justify-content: space-between;
        span.text {
          line-height: 34px;
          margin-right: 12px;
        }
      }
    }

   &.edit-product-modal {
      .form-builder{
        width: 700px;
        padding: 10px 0 0 10px;

        .input-and-btn{
          display: flex !important;
          flex-flow: row nowrap;

          .form-item, .form-text, .form-select, .biz-team-select {
            flex: 1;
          }

          .base-dist-picker{
            padding-right: 0;
          }

          button{
            margin-left: 10px;
          }
        }
      }
    }
}


</style>